<template>
  <view>
    <fu-custom bgColor="bg-white" :isBack="true">
      <block slot="content"><text class="text-title">{{ i18n['提现'] }}</text></block>
    </fu-custom>
	<view class="text-right padding-16" @tap="handleJump" data-url="/pages/wallet/account-bind/index">
		绑定账号
	</view>
    <!-- 输入提现金额 start -->
    <view class="bg-white padding" :style="[{ top: CustomBar + 'px' }]">
      <view class="text-333 flex align-center justify-between">
				<view class="text-bold text-666 fu-fs32">输入提现金币</view>
			</view>
      <view class="padding-tb solid-bottom flex align-center justify-between">
        <view class="flex-sub flex align-center">
          <text class="fu-fs40 text-333 text-bold margin-right-sm">¥</text>
          <input class="text-666 fu-fs32" type="decimal" :placeholder="'请输入金币数'+user_money" v-model="change_money" placeholder-class="text-999" @input="handleInput"/>
        </view>
        <view class="text-vecode" @click="total_tx">{{ i18n['全部'] }}</view>
      </view>
      <view class="margin-top-sm text-999 fu-fs24">
        <!-- {{ i18n['提现收取']}}{{withdraw_handling_fee}}%{{ i18n['的手续费'] }} -->
		兑换人民币为{{money_num}}元,每周四到账
        <!-- <text class="fu-iconfont tips margin-left-xs" @tap="showRole">&#xe8b0;</text> -->
      </view>
    </view>
    <!-- 输入提现金额 end -->

    <!-- 选择提现方式 start -->
    <view class="bg-white padding margin-top-sm">
      <text class="text-bold text-333 fu-fs32">{{ i18n['请选择提现方式'] }}</text>
      <view class="margin-top-sm">
        <view class="flex align-center justify-between padding-top" @click="get_type" :data-index="1">
          <view class="flex align-center">
            <image class="fu-block-56 margin-right-sm" :src="imgBaseUrl + 'wx.png'" mode=""></image>
            <view class="text-df">{{ i18n['微信'] }}</view>
          </view>
          <image class="fu-block-36" v-if="tabCurrentIndex == 1" :src="imgBaseUrl + 'checked.png'" mode=""></image>
          <image class="fu-block-36" v-else :src="imgBaseUrl + 'unchecked.png'" mode=""></image>
        </view>
        <!-- <view class="flex align-center justify-between padding-top" @click="get_type" :data-index="2">
          <view class="flex align-center">
            <image class="fu-block-56 margin-right-sm" :src="imgBaseUrl + 'wallet/alipay.png'" mode=""></image>
            <view class="text-df">{{ i18n['支付宝'] }}</view>
          </view>
          <image class="fu-block-36" v-if="tabCurrentIndex == 2" :src="imgBaseUrl + 'global/checked.png'" mode=""></image>
          <image class="fu-block-36" v-else :src="imgBaseUrl + 'global/unchecked.png'" mode=""></image>
        </view> -->
        <!-- <view class="flex align-center justify-between padding-top" @click="get_type" :data-index="3">
          <view class="flex align-center">
            <image class="fu-block-56 margin-right-sm" :src="imgBaseUrl + 'wallet/card.png'" mode=""></image>
            <view class="text-df">{{ i18n['银行卡'] }}</view>
          </view>
          <image class="fu-block-36" v-if="tabCurrentIndex == 3" :src="imgBaseUrl + 'global/checked.png'" mode=""></image>
          <image class="fu-block-36" v-else :src="imgBaseUrl + 'global/unchecked.png'" mode=""></image>
        </view> -->
      </view>
    </view>
    <!-- 选择提现方式 end -->

    <!-- 立即体现按钮 -->
	<view class="bottom">
		<view class="text-666 fu-fs28 text-bold text-center" @tap="handleJump" data-url="/pages/wallet/consumer-detail/index">明细</view>
		<view class="margin-lr height-88 line-height-88 bg-theme text-white round text-center margin-top-32" @tap="handleSubmit">
		  {{ i18n['提现'] }}
		</view>
	</view>
    <!-- 弹窗  -->
    <fu-popup v-model="showPopup" mode="center" width="540rpx" borderRadius="16">
      <view class="bg-white width-540 padding radius-16">
        <view class="text-333 text-bold text-lg text-center rule-title">
          {{ i18n['提现规则'] }}
          <view class="close-btn cuIcon-close text-lg" @tap="closePop"></view>
        </view>
        <view v-for="(item, index) in fast_detaile" :key="index" class="margin-top-sm text-999">{{ index + 1 }} , {{ item.content }}</view>
      </view>
    </fu-popup>
    <!-- 输入支付密码 -->
    <pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
    <!-- 断网检测 -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
/**
 * @author 刘畅
 */
// @see 引入支付密码组件
import payKeyboard from '../components/keyboard/keyboard.vue';
export default {
  components: {
    payKeyboard
  },
  data() {
    return {
      withdraw_handling_fee:'', //提现手续费
      CustomBar: this.CustomBar,
      tabCurrentIndex: 1, // {Number} 支付宝还是微信
      user_money: '', // {String} 账户余额
      account_name: '', // {Number} 没啥用，不敢删
      account: '', // {String} 没啥用，不敢删
      change_money: '', // {String} 用户输入的提现金额
      is_click: false, // {Boolean} 按钮的点击状态
      show_key: false, // {Boolean} 支付密码组件是否显示
      min: 1, // {Number} 最小提现金额
      showPopup: false, // {Boolean} 弹窗显示
      fast_detaile: [] ,// {Object}
	  money_num: 0
    };
  },
  onLoad(options) {
    this.getMoney();
    this.getLimitWithdraw();
  },

  methods: {
    /**
     * @function
     * @description 支付密码弹窗隐藏
     */
    hideFun() {
      this.show_key = false;
    },
    /**
     * @function
     * @description 判断用户是否设置支付密码
     * @property {Number} pay_money - 订单金额
     */
    isSetPayPassword() {
      return new Promise(resolve => {
        this.$api.post(global.apiUrls.isSetPay).then(res => {
          res = res.data;
          console.log('是否设置支付密码', res);
          if (res.code == 1) {
            if (res.data.falg == 0) {
              setTimeout(() => {
                this.$urouter.navigateTo('/pages/index/setting/change-pay-password/index');
              }, 800);
              resolve(false);
            } else {
              resolve(true);
            }
          } else {
            this.$message.info(res.msg);
            resolve(false);
          }
        });
      });
    },
    filter(type) {
      switch (type) {
        case 1:
          return this.i18n['请先绑定微信'];
        case 2:
          return this.i18n['请先绑定支付宝'];
        case 3:
          return this.i18n['请先绑定银行卡'];
      }
    },
    // 判断用户是否绑定了提现账户
    isBindAccount() {
      return new Promise(resolve => {
        this.$api
          .get(global.apiUrls.getWithdrawAccount, {
            account_type: this.tabCurrentIndex
          })
          .then(res => {
            res = res.data;
            console.log('是否绑定了提现账号', res);
            if (res.code == 0) {
              console.log('未绑定');
              this.$message.info(this.filter(this.tabCurrentIndex));
              let urls = '';
              if (this.tabCurrentIndex == 1) {
                urls = '/pages/wallet/wechat-bind/index';
              }
              if (this.tabCurrentIndex == 2) {
                urls = '/pages/wallet/alipay-bind/index';
              }
              if (this.tabCurrentIndex == 3) {
                urls = '/pages/wallet/card-bind/index';
              }
              setTimeout(() => {
                this.$urouter.navigateTo({
                  url: urls,
                  params: {
                    id: 1
                  }
                });
              }, 800);
              resolve(false);
            } else {
              resolve(true);
            }
          });
      });
    },
    /**
     * @event
     * @description 判断用户是否绑定体现账户,如果绑定就去体现
     * @param {Object} n - 用户输入的支付密码
     * @property {Number} account_type - 【账户类型 1 微信 2 支付宝 3 银行卡】
     * @property {Number} type - 【提现类型 1：微信 2：支付宝】
     * @property {Number} money - 【提现金额】
     * @property {Number} pay_password - 支付密码
     */
    getPassword(n) {
      this.$api
        .post(global.apiUrls.post5ce25d5e1ffb8, {
          type: this.tabCurrentIndex,
          money: this.change_money,
          pay_password: n.password
        })
        .then(res => {
          res = res.data;
          if (res.code == 1) {
            uni.$emit('changeMoney', {
              msg: this.i18n['页面更新']
            });
            this.$urouter.redirectTo({
              url: '/pages/wallet/withdraw-success/index',
              params: {
                type: this.filterName(this.tabCurrentIndex),
                money: this.money_num
              }
            });
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log('ERROR', err);
        });
    },
    filterName(type) {
      switch (type) {
        case 1:
          return this.i18n['微信'];
        case 2:
          return this.i18n['支付宝'];
        case 3:
          return this.i18n['银行卡'];
      }
    },
    /**
     * @function
     * @description 开启支付密码组件
     */
    showModal() {
      this.show_key = true;
    },
    /**
     * @event
     * @description 全部提现
     */
    total_tx() {
      if (parseFloat(this.user_money) <= 0) {
        this.$message.info(this.i18n['没有可提现的金额']);
      } else if (parseFloat(this.user_money) < parseFloat(this.min)) {
        this.$message.info(this.i18n['当前余额低于最低提现金额限制']);
      } else {
        this.change_money = this.user_money;
      }
    },
    /**
     * @event
     * @description 用户选择提现到支付宝还是微信
     */
    get_type(e) {
      this.tabCurrentIndex = e.currentTarget.dataset.index;
    },
    /**
     * @function
     * @description 获取用户余额
     */
    getMoney() {
      let _this = this;
      _this.$api
        .get(global.apiUrls.getMyMoney, {})
        .then(res => {
          console.log(res, 'get_my_money');
          if (res.data.code == 1) {
            _this.user_money = res.data.data.user_money;
            _this.withdraw_handling_fee = res.data.data.withdraw_handling_fee;
			this.getMoneyNum(this.user_money);
          }
        })
        .catch(err => {
          console.log(err, 'get_my_money');
        });
    },
	// 获取金币兑换人民币金额
	getMoneyNum(money) {
		this.$api.post(global.apiUrls.post640e8de7be2f8, {
			money_num: money
		}).then(res => {
			if (res.data.code == 1) {
				this.money_num = res.data.data
			}
		})
	},
	handleInput() {
		this.getMoneyNum(this.change_money)
	},
    /**
     * @function
     * @description 获取最小提现金额限制
     */
    getLimitWithdraw() {
      this.$api
        .post(global.apiUrls.postLimitWithdraw, {
          code: 'user.min_withdraw_money'
        })
        .then(res => {
          if (res.data.code == 1) {
            this.min = res.data.data;
          }
        })
        .catch(err => {});
    },
    /**
     * @event
     * @description 点击立即体现按钮
     * 先判断是否绑定了对应账号
     * 再判断是否设置了支付密码
     * 再提现
     */
    async handleSubmit() {
      let isBindAccount = await this.isBindAccount();
      if (!isBindAccount) return;
      console.log('绑定了账号,下一步');
      let isSetPayPassword = await this.isSetPayPassword();
      if (!isSetPayPassword) return;
      console.log('设置了支付密码,下一步');
      if (!this.change_money) {
        this.$message.info('请输入提现金币');
        return false;
      }
      // if (Number(this.change_money) < Number(this.min)) {
      //   this.$message.info(this.i18n['最小提现金额为'] + this.min + this.i18n['元']);
      //   return false;
      // }
      if (Number(this.change_money) > Number(this.user_money)) {
        this.$message.info(this.i18n['可提现余额不足']);
        return false;
      }
      this.showModal();
    },
    showRole() {
      let _this = this;
      _this.$api
        .post(global.apiUrls.getWithdrawRule)
        .then(res => {
          if (res.data.code == 1) {
            _this.fast_detaile = res.data.data;
            this.showPopup = true;
          }
        })
        .catch(err => {
          console.log(err, 'get_my_money');
        });
    },
    closePop() {
      this.showPopup = false;
    },
  }
};
</script>

<style lang="scss" scoped>
  .rule-title {
    position: relative;
    .close-btn {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .bottom {
	  position: fixed;
	  bottom: 60rpx;
	  width: 100%;
  }
</style>
